<template>
  <div class="chart-container">
    <!--
       -->
    <el-row>
      <!--        用户浏览的食谱-->
      <el-col :span="8">
        <h3 class="chart-title">
          用户浏览的食谱
        </h3>
        <div class="chart-wrapper">
          <ve-bar
            :colors="['#ff69ec']"
            :data="viewedData"
            :extend="barExtend"
            :judge-width="true"
            :legend="legend"
            :settings="{
              metrics: ['times'],
              dataOrder: {
                label: 'times',
                order: 'desc'
              },
              min: [0],
              max: [4000],
              labelMap: {
                recipe: '菜谱',
                times: '次数'
              }
            }"
            :text-style="textStyle"
          />
          <!--          <ve-histogram-->
          <!--            :judge-width="true"-->
          <!--            :extend="extend"-->
          <!--            :settings="chartSettings"-->
          <!--            :data="viewedData"-->
          <!--            :textStyle="textStyle"-->
          <!--            :legend="legend"-->
          <!--            :colors="['#ff69ec']"-->
          <!--          ></ve-histogram>-->
        </div>
      </el-col>
      <!--      用户收藏的食谱-->
      <el-col :span="8">
        <h3 class="chart-title">
          用户收藏的食谱
        </h3>
        <div class="chart-wrapper">
          <ve-bar
            :colors="['#00d4b8']"
            :data="favedData"
            :extend="barExtend"
            :judge-width="true"
            :legend="legend"
            :settings="{
              min: [0],
              max: [70],
              metrics: ['times'],
              dataOrder: {
                label: 'times',
                order: 'desc'
              },
              labelMap: {
                recipe: '菜谱',
                times: '次数'
              }
            }"
            :text-style="textStyle"
          />
        </div>
      </el-col>
      <!--      一键烹饪过的食谱-->
      <el-col :span="8">
        <h3 class="chart-title">
          一键烹饪过的食谱
        </h3>
        <div class="chart-wrapper">
          <ve-bar
            :colors="['#2196F3']"
            :data="cookedData"
            :extend="barExtend"
            :judge-width="true"
            :legend="legend"
            :settings="{
              min: [0],
              max: [70],
              metrics: ['times'],
              dataOrder: {
                label: 'times',
                order: 'desc'
              },
              labelMap: {
                recipe: '菜谱',
                times: '次数'
              }
            }"
            :text-style="textStyle"
          />
        </div>
      </el-col>
    </el-row>

    <dv-decoration-10 style="width:100%;height:5px;margin:10px 0" />

    <el-row>
      <!--      使用过的模式-->
      <el-col :span="12">
        <h3 class="chart-title">
          使用过的模式
        </h3>
        <div class="chart-wrapper">
          <ve-bar
            :colors="['#FF7F50']"
            :data="usedModeData"
            :extend="barExtend"
            :judge-width="true"
            :legend="legend"
            :settings="modeChartSetting"
            :text-style="textStyle"
          />
        </div>
      </el-col>
      <!--      热门搜索词-->
      <el-col :span="12">
        <h3 class="chart-title">
          热门搜索词
        </h3>
        <div class="chart-wrapper">
          <!--
          -->
          <ve-histogram
            :colors="['#f2f2f2']"
            :data="searchedData"
            :judge-width="true"
            :extend="extend"
            :legend="legend"
            :settings="searchChartSetting"
            :text-style="textStyle"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VeHistogram from 'v-charts/lib/histogram.common'
import VeBar from 'v-charts/lib/bar.common'

export default {
  name: 'Chart',
  components: { VeHistogram, VeBar },
  data () {
    return {
      //  '#ff69ec', '#00d4b8','#2196F3'
      colors: ['#00d4b8'],
      legend: {
        show: false,
        textStyle: {
          color: 'white',
          fontSize: 16
        }
      },
      textStyle: {
        color: 'white',
        fontSize: 16
      },
      barExtend: {
        series: {
          label: {
            show: true,
            position: 'right',
            formatter: function (params) {
              // console.log(params)
              // params.name +
              return params.data
            }
          }
        },
        xAxis: {
          splitLine: false,
          axisLabel: {
            showMaxLabel: false,
            textStyle: {
              fontSize: 12
            },
            formatter: function (value, index) {
              return value
              // let val = Number.parseInt(value)
              // if (val >= 1000) {
              //   return val / 1000 + 'k'
              // }
              // return val
            }
          }
        },
        yAxis: {
          axisLabel: {
            interval: 0,
            rotate: 0,
            axisLabel: {
              margin: 12,
              fontSize: 6
            }
          }
        }
      },
      extend: {
        yAxis: {
          splitLine: false
        },
        series: {
          label: {
            show: true,
            position: 'top',
            formatter: function (params) {
              // console.log(params)
              // params.name +
              return params.data
            }
          }
        }
      },
      chartSettings: {
        min: [0],
        // max: [5000],
        labelMap: {
          recipe: '菜谱',
          times: '次数'
        }
      },
      modeChartSetting: {
        min: [0],
        max: [3000],
        metrics: ['times'],
        dataOrder: {
          label: 'times',
          order: 'desc'
        },
        labelMap: {
          mode: '模式',
          times: '次数'
        }
      },
      searchChartSetting: {
        labelMap: {
          word: '搜索词',
          times: '次数'
        }
      },

      //  浏览过的食谱
      viewedData: {
        columns: ['recipe', 'times'],
        rows: [
          {
            recipe: '油焖大虾',
            times: 2969
          },
          {
            recipe: '糖醋小排',
            times: 2077
          },
          {
            recipe: '奥尔良烤鸡翅',
            times: 1468
          },
          {
            recipe: '鲜虾花蛤蒸蛋羹',
            times: 1268
          },
          {
            recipe: '蛋黄酥',
            times: 1002
          },
          {
            recipe: '牛奶山药泥',
            times: 899
          },
          {
            recipe: '清蒸鲈鱼',
            times: 806
          },
          {
            recipe: '浓香芝士榴莲披萨',
            times: 801
          },
          {
            recipe: '经典葡式蛋挞',
            times: 657
          },
          {
            recipe: '日本豆腐蒸虾仁',
            times: 646
          },
          {
            recipe: '泡芙',
            times: 636
          },
          {
            recipe: '川贝冰糖炖雪梨',
            times: 541
          },
          {
            recipe: '孔雀开屏鱼',
            times: 537
          },
          {
            recipe: '蒸小米糕',
            times: 524
          },
          {
            recipe: '北海道夹心戚风杯',
            times: 500
          },
          {
            recipe: '蒜香烤茄子',
            times: 481
          },
          {
            recipe: '大白菜鲜肉柳叶饺',
            times: 460
          },
          {
            recipe: '日式轻乳酪蛋糕',
            times: 458
          },
          {
            recipe: '原味戚风蛋糕',
            times: 453
          },
          {
            recipe: '梅菜扣肉',
            times: 448
          }
        ]
      },
      //  收藏的食谱
      favedData: {
        columns: ['recipe', 'times'],
        rows: [
          {
            recipe: '奥尔良烤鸡翅',
            times: 50
          },
          {
            recipe: '经典葡式蛋挞',
            times: 33
          },
          {
            recipe: '蒜香烤茄子',
            times: 32
          },
          {
            recipe: '广式新派烧腩',
            times: 25
          },
          {
            recipe: '海绵蛋糕',
            times: 21
          },
          {
            recipe: '酱香烤排骨',
            times: 19
          },
          {
            recipe: '蒜蓉烤生蚝',
            times: 18
          },
          {
            recipe: '孜然羊肉串',
            times: 17
          },
          {
            recipe: '烤鸡块',
            times: 17
          },
          {
            recipe: '蜜汁鸡中翅',
            times: 17
          },
          {
            recipe: '蛋黄酥',
            times: 16
          },
          {
            recipe: '黑椒汁烤花椰菜',
            times: 16
          },
          {
            recipe: '鸡蛋芝士烤吐司',
            times: 16
          },
          {
            recipe: '意大利薄底披萨',
            times: 15
          },
          {
            recipe: '焦糖布丁',
            times: 14
          },
          {
            recipe: '牛奶山药泥',
            times: 14
          },
          {
            recipe: '迷迭香烤整鸡',
            times: 14
          },
          {
            recipe: '芝士焗番薯',
            times: 13
          },
          {
            recipe: '香脆芝士烤馒头',
            times: 13
          },
          {
            recipe: '宝宝手指饼干',
            times: 13
          }
        ]
      },
      // 烹饪过的食谱
      cookedData: {
        columns: ['recipe', 'times'],
        rows: [
          {
            recipe: '奥尔良烤鸡翅',
            times: 51
          },
          {
            recipe: '奶汁烩新西兰青口',
            times: 45
          },
          {
            recipe: '日本豆腐蒸虾仁',
            times: 40
          },
          {
            recipe: '香菇蒸鹌鹑蛋',
            times: 40
          },
          {
            recipe: '糖醋小排',
            times: 34
          },
          {
            recipe: '川贝冰糖炖雪梨',
            times: 31
          },
          {
            recipe: '清蒸鲈鱼',
            times: 31
          },
          {
            recipe: '牛奶山药泥',
            times: 31
          },
          {
            recipe: '经典葡式蛋挞',
            times: 30
          },
          {
            recipe: '雪花酥',
            times: 30
          },
          {
            recipe: '鲜虾花蛤蒸蛋羹',
            times: 27
          },
          {
            recipe: '豉椒蒸花蛤',
            times: 23
          },
          {
            recipe: '南瓜蒸排骨',
            times: 19
          },
          {
            recipe: '蒜蓉开背虾',
            times: 19
          },
          {
            recipe: '油焖大虾',
            times: 19
          },
          {
            recipe: '香烤秋刀鱼',
            times: 18
          },
          {
            recipe: '泡芙',
            times: 18
          },
          {
            recipe: '香脆花生米',
            times: 17
          },
          {
            recipe: '红枣枸杞蒸滑鸡',
            times: 15
          },
          {
            recipe: '秋葵鸡蛋羹',
            times: 15
          }
        ]
      },
      //  使用过的模式
      usedModeData: {
        columns: ['mode', 'times'],
        rows: [
          {
            mode: '烧烤',
            times: 2814
          },
          {
            mode: '微波',
            times: 1855
          },
          {
            mode: '发酵',
            times: 1335
          },
          {
            mode: '蒸汽',
            times: 1296
          },
          {
            mode: '解冻',
            times: 842
          },
          {
            mode: '清洁',
            times: 825
          },
          {
            mode: '翻热',
            times: 591
          },
          {
            mode: '热牛奶',
            times: 561
          },
          {
            mode: '黄油软化',
            times: 383
          },
          {
            mode: '预热',
            times: 350
          },
          {
            mode: '蒸汽杀菌',
            times: 143
          },
          {
            mode: '腔体除味',
            times: 134
          },
          {
            mode: '酸奶发酵',
            times: 114
          },
          {
            mode: '炉腔清洁',
            times: 72
          },
          {
            mode: '面团发酵',
            times: 64
          },
          {
            mode: '水垢清洁',
            times: 26
          }
        ]
      },
      //  热门搜索词
      searchedData: {
        columns: ['word', 'times'],
        rows: [
          {
            word: '蛋挞',
            times: 220
          },
          {
            word: '鸡翅',
            times: 204
          },
          {
            word: '鱼',
            times: 197
          },
          {
            word: '烤红薯',
            times: 175
          },
          {
            word: '蛋糕',
            times: 168
          },
          {
            word: '面包',
            times: 146
          },
          {
            word: '烤',
            times: 133
          },
          {
            word: '红薯',
            times: 99
          },
          {
            word: '鸡',
            times: 97
          },
          {
            word: '披萨',
            times: 93
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  .chart-title {
    margin-top: 5px;
    margin-bottom: 0px;
    padding-left: 20px;
    /*text-align: center;*/
  }
}
</style>
